<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>创建推送内容</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<!-- Add by Kravis Liu 2014.09.22 -->
		<link rel="stylesheet" href="/css/base.css" />
		<link rel="stylesheet" href="/css/form.css" />
		<link rel="stylesheet" media="screen" href="/css/validate.css">
		<script src="/js/jquery-1.11.1.min.js"></script>	
		<script src="/js/jqueryValidation/jquery.validate.min.js"></script>	
		<script src="/js/jqueryValidation/additional-methods.js"></script>
		<script src="http://webapi.amap.com/maps?v=1.2&key=662b7a5d373bccb29453167d08245aef" type="text/javascript"></script>
		
		<script src="/js/myTime.js"></script>
		<script type="text/javascript">
	
			$(document).ready(function(){
			        
			        $("#createPostForm").validate({
					rules: {
						title: {
							required: true
						},
						text:{
							required : true
						},
						
						imageFile: {
						        required: true
						},
						longitude: {
						        required: true
						},
						latitude: {
						        required: true
			                        },
					},
					messages: {
						title: {
							required: true
						},
						text:{
							required : true
						},
						
						imageFile: {
						        required: "图片不能为空"
						},
						longitude: {
						        required: "经度不能为空"
						},
			                        latitude : {
			                                required: "纬度不能为空"
                                                }
					},
					submitHandler:function(form){
		                            form.submit();
		                        }
				});
			});
				
			function upload(){
				$("#createPostForm").submit();
			}
			
			function getLocation(){
							
				var location = $('#mylocation').val()
				if(!location){
				    alert("请输入要获取地理位置的地点名称");
				    return;
				}
			    var geocoderOption = {
			        range:300,//范围
			        crossnum:2,//道路交叉口数
			        roadnum:3,//路线记录数
			        poinum:2//POI点数
			    };
			    var geocoder = new AMap.Geocoder(geocoderOption);
			    geocoder.geocode(location, function(data){
			        var x = (data.list)[0].x;
			        var y = (data.list)[0].y;
					$('#longitude').val(x);
					$('#latitude').val(y);
			    });
					
			}
			
			
			function showImg(fileid) {  
				var reader = new FileReader();  
				var picpreview=document.getElementById("preview");    
				reader.onload = function(e) {  
					var img = $("#taskImg");
					img.attr("src",this.result); 
				}
				reader.readAsDataURL(document.getElementById(fileid).files[0]);  
			}				
		</script>
	</head>

	<body>
	    	<div id="page">
			<div id="header">
				<h4>推送内容</h4>
			</div>
		
	        	<form enctype="multipart/form-data" method="post" id="createPostForm" action="/app/createPost">
		
				<p>
					<label>标题：</label>
			  		<input type="text" name="postTitle" id="postTitle" />
				</p>
				<p>
					<label>内容：</label>
					<textarea id="postContent" name="postContent" rows="3" cols="50"></textarea>
				</p>
				
				<p>
					<label>推送类型：</label>
				  	<select name="postType" id="postType">
				  	
						<option value='0'>系统推荐</option>
						<option value='1'>用户推荐</option>						
		          	</select>
				</p>  
				<p>
					<label>内容分类：</label>
				 	<select name="categary" id="categary">
					<%if(CategoryObjects){%>
						<%  CategoryObjects.forEach(function (Category){ %>
						<option value='<%= Category.id %>'><%= Category.get('categoryName') %></option>
					<% })} %>  
		          		</select>
				</p> 
				<p>
					<label>呈现方式：</label>
				 	<select name="contentType" id="contentType">
						<option value='0'>图文</option>
				  	</select>
				</p> 	
				<p>
					<label>相关推荐地点：</label>
				 	<select name="postLocation" id="postLocation">
				 	<%if(LocationObjects){%>
				 		<%  LocationObjects.forEach(function (Location){ %>
						<option value='<%= Location.id %>'><%= Location.get('locationName')%></option>
						<% })} %> 
				  	</select>
				</p> 	
				<p>
					<label>地址：</label>
					<input id="postAddress" name="postAddress" value="" type="text"/>
				</p>
				<p>
					<label>联系方式：</label>
					<input id="contact" name="contact" value="" type="text"/>
				</p>
							
				<p>
					<label>任务图片：</label>
					<img id="taskImg" src="" style="width: 350px; height: 200px;"/>
					<input type="button" name="addImage" value="添加" />
					</p>
					<input type="file" id="taskFile" name="taskFile" onchange="showImg(this.id);">
				</p>
				
				<p>
					<label>开始时间：</label>
				  	<input id="startTime" name="startTime" value="" type="text" onclick="setday(this,10,0);" readonly="readonly" />
				</p>		
				<p>
					<label>截止时间：</label>
				  	<input id="endTime" name="endTime" value="" type="text" onclick="setday(this,10,0);" readonly="readonly"/>
				</p>
				<p>
					<label>地理位置：</label>
					<input type="text" value="" id="mylocation"/>
					<input type="button" name="location" id="location" value="从地图上拾取坐标" onclick="getLocation();"/>
					 
				</p>
				<p>
					<label>经度：</label>
					<input type="text" name="longitude" id="longitude" />
				</p>        
				<p>
					<label>纬度：</label>
				        <input type="text" name="latitude" id="latitude" /> 
				</p>
				<p>
					<input class="change" type="button" onclick="upload();" value="上传" />
				</p>
			</form>
			
			<div id="footer">
				<a style="float:right;margin:5px" href="/logout">退出</a>
				<a style="float:right;margin:5px" href="/app/index">主页</a>
			</div>
		</div>
    	</body>
</html>
